import React, { Component,lazy, Suspense } from 'react';

// 导入路由组件
import { Link,NavLink,Switch,Route,Redirect } from 'react-router-dom';
// 分别导入6个组件(店铺、分类、全部商品、购物车、个人中心、路径不匹配页)
// import HomeJsx from './Second-level routing/HomeJsx';
// import MyClass from './Second-level routing/MyClass';
// import Allshop from './Second-level routing/Allshop';
// import ShopCar from './Second-level routing/ShopCar';
// import User from './Second-level routing/User';
// import NotFound from './NotFound';

// 引入 Tabbar 组件
import Tabbar from '../components/Rests/Tabbar'

// 用 lazy 函数处理过的组件，变成“懒加载组件”，当用户访问这个组件对应的路由时才会临时加载这个组件
var HomeJsx = lazy(() => import('./Second-level routing/HomeJsx'));
var MyClass = lazy(() => import('./Second-level routing/MyClass'));
var Allshop = lazy(() => import('./Second-level routing/Allshop'));
var ShopCar = lazy(() => import('./Second-level routing/ShopCar'));
var User = lazy(() => import('./Second-level routing/User'));
var NotFound = lazy(() => import('./NotFound'));
class IndexJsx extends Component {
    render() {
        return (
            <div className='index'>
                <Suspense fallback={<div className='loading'>loading...</div>}>
                    {/* 定义二级路由组件 */}
                    <Switch>
                        <Route exact path="/index/homejsx" component={HomeJsx}/>
                        <Route exact path="/index/myclass" component={MyClass}/>
                        <Route exact path="/index/allshop" component={Allshop}/>
                        <Route exact path="/index/shopcar" component={ShopCar}/>
                        <Route exact path="/index/user" component={User}/>
                        <Redirect exact from="/index" to="/index/homejsx" />
                        <Route path="*" component={ NotFound } />
                    </Switch>
                </Suspense>
                {/* <div className='Botton'>
                    <Link to="/index/homejsx">店铺</Link>
                    <Link to="/index/myclass">分类</Link>
                    <Link to="/index/allshop">全部商品</Link>
                    <Link to="/index/shopcar">购物车</Link>
                    <Link to="/index/user">个人中心</Link>
                </div> */}
                <Tabbar/>
            </div>
        );
    }
}

export default IndexJsx;